@import "../../../styles/App.scss";
.filter {
  .filter_view {
  
    .filter_title {
      height: 35px;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      display: flex;
      position: relative;
      z-index: 1001;
      background-color: #fff;
      .title_item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: $theme-color;
        font-weight: 600;
        font-size: 15px;
      }
    }
    .picker_content {
      position: relative;
      z-index: 1001;
      background-color: #fff;
      // 0-2 picker 父容器
      .filter_picker {
        .picker_tools {
          height: 45px;
          display: flex;
          border-bottom: 1px solid #ccc;
          border-top: 1px solid #ccc;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
          }
          span:nth-child(1) {
            flex: 1;
            color: $theme-color;
            background-color: #fff;
          }
          span:nth-child(2) {
            flex: 2;
            background-color: $theme-color;
            color: #fff;
          }
        }
      }
      // 3 最后一个 筛选组件的父容器
      .filter_more {
        // 筛选的内容
        position: fixed;
        right: 0;
        width: 80vw;
        height: 100vh;
        top: 0;
        background-color: #fff;
        z-index: 10000;
        .filter_more_content {
          height: calc(100vh - 50px);
          overflow: auto;
          padding: 15px;
          padding-top: 0;
          .more_group {
            padding-bottom: 15px;
            border-bottom: 1px solid #ccc;
            .more_group_title {
              padding: 15px 0;
              font-size: 15px;
              color: #000;
            }
            .more_group_list {
              display: flex;
              flex-wrap: wrap;

              .more_item {
                width: 70px;
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                border: 1px solid #ccc;
                border-radius: 3px;
                margin-right: 15px;
                margin-bottom: 15px;
              }
              .active{
                color: $theme-color;
                border: 1px solid currentColor;
                background-color: #defaef;
              }
            }
          }
        }
        // 两个按钮
        .filter_more_tools {
          height: 50px;
          display: flex;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
          }
          span:nth-child(1) {
            color: $theme-color;
            flex: 1;
          }
          span:nth-child(2) {
            flex: 2;
            background-color: $theme-color;
            color: #fff;
          }
        }
      }
    }

    // 遮罩层
    .mask {
      position: fixed;
      width: 100vw;
      height: 100vh;
      left: 0;
      top: 0;
      background-color: black;
      opacity: 0.6;
      z-index: 1000;
    }
  }
}


// 根据索引来设置 标题的层级
.z100{
  z-index: 100!important ;
}